<template>
  <div class="editor" ref="editor"></div>
</template>

<script>
  import E from 'wangeditor';
  import { upload } from "@/api/tool/upload.js";
  export default {
    props: {
      value: {
        type: String,
        default: '',
      },
      meanArray: {
        // 自定义菜单
        type: Array,
        default: null,
      },
    },
    model: {
      prop: 'value',
      event: 'change',
    },
    watch: {
      value: function (value) {
        console.log(value)
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value);
        }
      },
      //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
    },
    data() {
      const baseUrl = process.env.VUE_APP_BASE_API
      return {
        // 默认有这么多菜单，meanArray有值以meanArray为准
        defaultMeanus: [
          'head',
          'bold',
          'fontSize',
          'fontName',
          'italic',
          'underline',
          'strikeThrough',
          'indent',
          'lineHeight',
          'foreColor',
          'backColor',
          'link',
          'list',
          'justify',
          'quote',
          'emoticon',
          'image',
          'video',
          'table',
          'code',
          'splitLine',
          'undo',
          'redo',
        ],
        editor: null,
      };
    },
    methods: {
      init() {
        const _this = this;
        this.editor = new E(this.$refs.editor);
        /*this.editor.config.uploadImgServer = "http://vsadmin.shooknet.com:83/prod-api/upload"// 上传图片的接口地址*/
        /*this.editor.config.uploadImgServer ='http://47.113.126.181:8989/security/upload' // 上传图片的接口地址*/
        this.editor.config.showLinkImg = false  //   禁止上传网络图片
        this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
        this.editor.config.debug = true // 开启debug模式
        this.editor.config.withCredentials = true

        /* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/
        this.editor.config.customUploadImg = async (files, insert) => {
          /* files 是 input 中选中的文件列表 */
          let formData = new FormData()
          formData.append('file', files[0])
          let data = await upload(formData)
          /* upload方法是后台提供的上传图片的接口 */
          /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/
          console.log(data)
          for (let i = 0; i <data.data.length ; i++) {
            if (data.data[i]!=null){
              insert(data.data[i].url)
            }
          }

        }
/*        this.editor.config.customUploadImg = function (files, insert) {
          // resultFiles 是 input 中选中的文件列表
          // insertImgFn 是获取图片 url 后，插入到编辑器的方法
          console.log(insert)
          // 上传图片，返回结果，将图片插入到编辑器中
          insert(files)
        }*/
        this.editor.config.uploadImgHeaders = {
          /*"Access-Control-Allow-Origin": '*',
          "Access-Control-Allow-Headers": '*',
          "Access-Control-Allow-Methods": '"GET, POST, PUT, OPTIONS"',*/
          "Content-Type":"text/html;charset=utf-8"
        }

        this.setMenus(); //设置菜单

        this.editor.config.uploadImgHooks = {
          // 图片上传并返回结果，但图片插入错误时触发
          fail: function (xhr, editor, result) {
            console.log(result)
          },
          success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            console.log(result, 'success')
          }
        }

        this.editor.config.onchange = (html) => {
          _this.$emit('change', html); // 将内容同步到父组件中
        };
        this.editor.create(); //创建编辑器
      },
      setMenus() {
        // 设置菜单
        if (this.meanArray) {
          this.editor.config.menus = this.meanArray;
        } else {
          this.editor.config.menus = this.defaultMeanus;
        }
      },
      getHtml() {
        // 得到文本内容
        return this.editor.txt.html();
      },
      setHtml(txt) {
        // 设置富文本里面的值
        this.editor.txt.html(txt);
      },
    },
    mounted() {
      let that = this;
      that.$nextTick(function () {
        that.init();
      });
    },
  };
</script>
<style lang="css">
  .text {
    border: 1px solid #ccc;
    min-height: 500px;
  }
</style>

<style lang="css" scoped>
  .editor {
    width: 974px;
  }
</style>
